<template>
  <div class="myFooter-wrap" v-show="showFooter">
    <div class="myFooter">
      <div class="footer-title">{{$store.state.webInfo.footer}}</div>
      <div class="icp">本网站由 <a href="https://poetize.cn" target="_blank">Poetize</a> 强力支持 | ©2023时光倒影 | <a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">冀ICP备2022006189号</a>
      
       | 网站已稳定运行:{{uptime}}
      </div>
      
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      showFooter: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        uptime: null, // 存储网站运行时间的变量

      }
    },
    created() {
      this.calculateWebsiteUptime(); // 组件创建时调用计算网站运行时间的方法
      setInterval(this.calculateWebsiteUptime, 1000); // 每秒钟执行一次计算网站运行时间的方法
    },

    methods:{
    
      calculateWebsiteUptime() {
        var startDate = new Date("2023-08-10T12:00:00"); // 网站开始运行的时间，这里以"2023-08-01 00:00:00"为例
        var currentDate = new Date(); // 获取当前时间

        // 计算时间差（以毫秒为单位）
        var timeDifference = currentDate - startDate;

        // 将时间差转换为天数、小时、分钟和秒数
        var seconds = Math.floor(timeDifference / 1000);
        var minutes = Math.floor(seconds / 60);
        var hours = Math.floor(minutes / 60);
        var days = Math.floor(hours / 24);

        // 更新网站运行时间
        this.uptime = days + "天 " + (hours % 24) + "小时 " + (minutes % 60) + "分钟 " + (seconds % 60) + "秒";
      },

    }
  }
</script>

<style scoped>
  .myFooter-wrap {
    user-select: none;
    animation: hideToShow 2s;
  }

  .myFooter {
    border-radius: 1.5rem 1.5rem 0 0;
    background: var(--gradientBG);
    text-align: center;
    color: var(--white);
    background-size: 300% 300%;
    animation: gradientBG 10s ease infinite;
  }

  .footer-title {
    padding-top: 10px;
    font-size: 16px;
  }

  .icp, .icp a {
    color: var(--maxGreyFont);
    font-size: 13px;
  }

  .icp {
    padding-top: 10px;
    padding-bottom: 10px;
  }

  .icp a {
    text-decoration: none;
    transition: all 0.3s;
  }

  .icp a:hover {
    color: var(--themeBackground);
  }

</style>
